.root {
  display: flex;
  gap: 50px;

  @media (max-width: em(950px)) {
    flex-direction: column;
  }
}

.colorPicker {
  @media (max-width: em(950px)) {
    width: 100%;
  }
}

.saturation {
  & :global(.mantine-ColorPicker-saturationOverlay) {
    border-radius: var(--mantine-radius-md);
  }
}

.input {
  max-width: 280px;
  margin-bottom: var(--mantine-spacing-sm);

  @media (max-width: em(950px)) {
    width: 100%;
    max-width: 100%;
  }
}

.switch {
  @media (max-width: em(600px)) {
    display: none;
  }
}
